<template>
  <div id="hr-echarts1" style="width:100%;height:100%;pointer-events:all"></div>
</template>
<script>
export default {
  data() {
    return {
      dataList: []
    };
  },
  mounted() {
    this.getData();
  },
  created() {},
  methods: {
    // 获取数据
    getData() {
      this.$get('/humanresources/getLicenseName').then(res => {
        this.dataList = res.data
        this.renderEcharts(res.data)
      })
    },
    // 渲染饼图
    renderEcharts(datas) {
      let myChart = this.$echarts.init(document.getElementById("hr-echarts1"));
      var img = '';

      var trafficWay = datas

      var data = [];
      let total = 0;

      var color=['#00ffff','#006ced','#ffe000','#ff5b00','#ffa800','#ff3000','#00cfff']
      for (var i = 0; i < trafficWay.length; i++) {
        total += parseInt(trafficWay[i].value)
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        });
      }

      var seriesOption = [{
        name: '',
        type: 'pie',
        clockwise: false,
        radius: ["55%", "60%"],
        center: ["50%", "50%"],
        // hoverAnimation: false,
        label: {
          show: true,
          position: 'outside',
          color: '#fff',
          formatter: function(params) {
            var percent = 0;
            let total = 0;
            for (var i = 0; i < trafficWay.length; i++) {
              total += parseInt(trafficWay[i].value);
            }
            percent = ((params.value / total) * 100).toFixed(2);
            if (params.name !== '')  {
              return params.name.length > 4 ? params.name.substring(0, 7) + '\n' + params.name.substring(7) + '\n' + '\n' + percent + '% | ' + params.value : params.name + '\n' + '\n' + percent + '% | ' + params.value;
            } else {
              return '';
            }
          },
        },
        data: data
      }];

      let optionRich = {
        a: {
          fontSize: 14,
          fontWeight: 400,
          color: '#ffffff',
          padding: [0, 5, 0, 0]
        },
        b: {
          fontWeight: 700,
          fontSize: 14,
          color: '#ffffff',
          padding: [0, 5, 0, 0]
        },
        c: {
          fontSize: 14,
          fontWeight: 700,
          color: '#ffffff',
          padding: [0, 0, 0, 5]
        }
      }

      var option = {
        color : color,
        title: {
          text: total,
          top: '45%',
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: '400'
          }
        },
        graphic: {
          elements: [{
            type: "image",
            z: 3,
            style: {
              image: img,
              width: 110,
              height: 110
            },
            left: 'center',
            top:  'center',
            position: [100, 100]  
          }]
        },
        tooltip: {
          show: false
        },
        legend: {
          show: false,
          icon: "circle",
          orient: 'horizontal',
          left: '0%',
          align: 'left',
          top: 'top',
          textStyle: {
            color: "#fff"
          },
          itemHeight: 8,
          itemWidth: 8,
          itemGap: 10,
          formatter: function (name) {
            let value = 0
            let percent = 0
            data.forEach((item, i) => {
              if (item.name == name) {
                value = item.value ? item.value : 0
                percent = (item.value / total * 100).toFixed(2)
              }
            })
            return `{a|${name}}{b|${'|'}}{b|${percent + '%'}}{c|${value}}`
          },
          textStyle: {
            rich: optionRich
          }
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      }

      option && myChart.setOption(option);
    }
  },
};
</script>
